<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../common/comon_tag.jsp" %>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>新闻列表</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="${pageContext.request.contextPath }/app/css/mui.min.css">
		<style type="text/css">
			#list {
				margin-top: -1px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">新闻列表</h1>
		</header>
		<div class="mui-content">
			<ul id="list" class="mui-table-view mui-table-view-chevron">
				
			<c:forEach items="${pageInfo.list }" var="temp" varStatus="status">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="${pageContext.request.contextPath }/news_app_detail?nid=${temp.nid }">
						${fn:substring(temp.ntitle,0,15)}
			      		<c:if test="${fn:length(temp.ntitle) > 15 }">...</c:if>
					</a>
				</li>
				
			</c:forEach>
			</ul>
		</div>
		<script src="${pageContext.request.contextPath }/app/js/mui.min.js"></script>
		<script src="${pageContext.request.contextPath }/app/js/update.js" type="text/javascript" charset="utf-8"></script>
		<script>
			mui.init({
				statusBarBackground: '#f7f7f7'
			});
			var aniShow = "pop-in";
			var menu = null,
				showMenu = false;
			var isInTransition = false;
			var _self;
			//åªæiosæ¯æçåè½éè¦å¨Androidå¹³å°éèï¼
			if(mui.os.android) {
				var list = document.querySelectorAll('.ios-only');
				if(list) {
					for(var i = 0; i < list.length; i++) {
						list[i].style.display = 'none';
					}
				}
				//Androidå¹³å°ææ¶ä½¿ç¨slide-in-rightå¨ç»
				if(parseFloat(mui.os.version) < 4.4) {
					aniShow = "slide-in-right";
				}
			}
			//åå§åï¼å¹¶é¢å è½½webviewæ¨¡å¼çéé¡¹å¡			
			function preload() {

				var menu_style = {
					left: "-70%",
					width: '70%',
					popGesture: "none",
					render:"always"
				};

				if(mui.os.ios) {
					menu_style.zindex = -1;
				}

				//å¤çä¾§æ»å¯¼èªï¼ä¸ºäºé¿ååå­é¡µé¢åå§åç­ç«äºèµæºï¼å»¶è¿å è½½ä¾§æ»é¡µé¢ï¼
				menu = mui.openWindow({
					id: 'index-menu',
					url: 'index-menu.html',
					styles: menu_style,
					show: {
						aniShow: 'none'
					},
					waiting: {
						autoShow: false
					}
				});
			}
			mui.plusReady(function() {
				//è¯»åæ¬å°å­å¨ï¼æ£æ¥æ¯å¦ä¸ºé¦æ¬¡å¯å¨
				var showGuide = plus.storage.getItem("lauchFlag");
				//ä»æ¯æç«å±æ¾ç¤º
				plus.screen.lockOrientation("portrait-primary");
				if(showGuide) {
					//æå¼ï¼è¯´æå·²ç»æ¾ç¤ºè¿äºï¼æ éæ¾ç¤ºï¼
					//å³é­splashé¡µé¢ï¼
					plus.navigator.closeSplashscreen();
					plus.navigator.setFullscreen(false);
					//é¢å è½½
					preload();
				} else {
					//æ¾ç¤ºå¯å¨å¯¼èª
					mui.openWindow({
						id: 'guide',
						url: 'examples/guide.html',
						styles: {
							popGesture: "none"
						},
						show: {
							aniShow: 'none'
						},
						waiting: {
							autoShow: false
						}
					});
					//å»¶è¿çåå ï¼ä¼åæå¼å¯å¨å¯¼èªé¡µé¢ï¼é¿åèµæºäºå¤º
					setTimeout(function() {
						//é¢å è½½
						preload();
					}, 200);
				}

				//ç»å¶é¡¶é¨å¾æ 
				_self = plus.webview.currentWebview();
				var titleView = _self.getNavigationbar();

				if(!titleView) {
					titleView = plus.webview.getLaunchWebview().getNavigationbar();
				}

				titleView.drawRect("#cccccc", {
					top: "43px",
					height:"1px",
					left: "0px"
				}); //ç»å¶åºé¨è¾¹çº¿

				//å¼å¯åå¼¹
				_self.setStyle({
					bounce: "vertical",
					bounceBackground:"#efeff4"
				});

				//ç»å¶å·¦ä¸è§menuå¾æ 
				var bitmap_menu = new plus.nativeObj.Bitmap("menu");
				bitmap_menu.loadBase64Data("");
				titleView.drawBitmap(bitmap_menu, {}, {
					top: "10px",
					left: "10px",
					width: "24px",
					height: "24px"
				});

				var about_left = window.innerWidth - 34;
				var bitmap = new plus.nativeObj.Bitmap("about");
				bitmap.loadBase64Data("");
				titleView.drawBitmap(bitmap, {}, {
					top: "10px",
					left: about_left + "px",
					width: "24px",
					height: "24px"
				});

				titleView.interceptTouchEvent(true);
				titleView.addEventListener("click", function(e) {
					var x = e.clientX;
					if(x < 44) { //è§¦åmenuèå
						var _left = parseInt(_self.getStyle().left);
						if(_left > 0) { //å¤äºæ¾ç¤ºç¶æ
							closeMenu();
						} else {
							openMenu();
						}
					} else if(x > about_left) { //è§¦åå³äºé¡µé¢
						var aniShow = mui.os.plus ? "slide-in-right" : "zoom-fade-out";
						mui.openWindow({
							url: "examples/info.html",
							id: "info",
							styles: {
								popGesture: "close",
								statusbar: {
									background: "#f7f7f7"
								}
							},
							show: {
								aniShow: aniShow,
								duration: 300
							}
						});
					}
				}, false);

				//å¯ç¨ä¾§æ»ææ½æä½ï¼å»¶æ¶çåå æ¯menué¡µæ¯å»¶æ¶åå»ºçï¼æä»¥è¿ééè¦ç¸åºå»¶æ¶
				setTimeout(function() {
					_self.drag({
						direction: "right",
						moveMode: "followFinger"
					}, {
						view: menu,
						moveMode: "follow"
					}, function(e) {
						//console.log(JSON.stringify(e));
					});
				}, 350);
				
			});
			//ä¸»åè¡¨ç¹å»äºä»¶
			mui('#list').on('tap', 'a', function() {
				var id = this.getAttribute("data-wid");
				if(!id) {
					id = this.getAttribute('href');
				}
				var href = this.getAttribute('href');

				//éplusç¯å¢ï¼ç´æ¥èµ°hrefè·³è½¬
				if(!mui.os.plus){
					location.href = href;
					return;
				}

				var titleType = this.getAttribute("data-title-type");

				var webview_style = {
					popGesture: "close"
				}
				var extras = {};


				//å¤çåçå¾çè½®æ­
				if(~id.indexOf("slider-native.html")) {
					webview_style.titleNView = { //éç½®åçæ é¢
						'backgroundColor': '#f7f7f7',
						'titleText': this.innerHTML.trim(),
						'titleColor': '#000000',
						autoBackButton: true,
						splitLine: {
							color: '#cccccc'
						}
					};

					webview_style.subNViews = [{ //éç½®å¾çè½®æ­
						id: 'slider-native',
						type: 'ImageSlider',
						styles: {
							left: 0,
							right: 0,
							top: 0,
							height: '200px',
							position: 'static',
							loop: true,
							images: [{
								src: '_www/images/yuantiao.jpg',
								width: '100%'
							}, {
								src: '_www/images/shuijiao.jpg',
								width: '100%',
							}, {
								src: '_www/images/muwu.jpg',
								width: '100%',
							}, {
								src: '_www/images/cbd.jpg',
								width: '100%',
							}]
						}
					}];
					
					var webview = plus.webview.create(this.href, id, webview_style, extras);
					webview.show(aniShow,300);
					return;
				}

				if(titleType == "native") {
					//å¦ä¸åºæ¯ä¸éç¨ä¸æåå¼¹ï¼
					//1ãåwebviewä¸æå·æ°ï¼2ãåºé¨æfixedå®ä½çdivçé¡µé¢
					if(!~id.indexOf('pullrefresh.html') && !~href.indexOf("examples/tabbar.html") && !~href.indexOf("list-to-detail/listview.html")) {
						webview_style.bounce = "vertical";
					}
					//å¾æ é¡µé¢éè¦å¯å¨ç¡¬ä»¶å é
					if(~id.indexOf('icons.html') || ~id.indexOf("echarts.html")) {
						webview_style.hardwareAccelerated = true;
					}
					if(~id.indexOf('im-chat.html')) {
						extras.acceleration = "none";
					}

					webview_style.statusbar = {
						background: "#f7f7f7"
					}

					mui.openWindowWithTitle({
						url:href,
						id:id,
						styles:webview_style,
						show:{
							event:"loaded",
							extras:extras
						},
						waiting: {
							autoShow: false
						}
					},{
						title:{
							text:this.innerText.trim()
						},
						back:{
							image:{
								base64Data:""
							}
						}
					});
				} else if(href && ~href.indexOf('.html')) {
					//ä¾§æ»èåéå¨ææ§å¶ä¸ä¸zindexå¼ï¼
					if(~id.indexOf('offcanvas-')) {
						webview_style.zindex = 9998;
						webview_style.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
					}
					
					var extras = {};
					if(id && id == "viewgroup"){//å¼ºå¶å¯ç¨æªå±
						extras.acceleration = "capture";
					}
					

					if(titleType && titleType=="transparent_native") {
						webview_style.titleNView = {
							'backgroundColor': '#f7f7f7',
							'titleText': this.innerHTML.trim(),
							'titleColor': '#000000',
							type: 'transparent',
							autoBackButton: true,
							splitLine: {
								color: '#cccccc'
							}
						}
					}else {
						webview_style.statusbar = {
							background: "#f7f7f7"
						}
					}
					
					var webview = plus.webview.create(this.href,id,webview_style,extras);
					webview.addEventListener("titleUpdate",function () {
						setTimeout(function () {
							webview.show(aniShow,300);
						},100);
					});
				}
			});
			/**
			 * æ¾ç¤ºä¾§æ»èå
			 */
			function openMenu() {
				plus.webview.startAnimation({
						'view': _self,
						'styles': {
							'fromLeft': '0',
							'toLeft': "70%"
						},
						'action': 'show'
					}, {
						'view': menu,
						'styles': {
							'fromLeft': "-70%",
							'toLeft': '0'
						},
						'action': 'show'
					},
					function(e) {
						//console.log(JSON.stringify(e));
						if(e.id == menu.id) { //ä¾§æ»èåæå¼
						}
					}.bind(this)
				)
			};
			/**
			 * å³é­èå
			 */
			function closeMenu() {
				plus.webview.startAnimation({
						'view': _self,
						'styles': {
							'fromLeft': '70%',
							'toLeft': "0"
						},
						'action': 'show'
					}, {
						'view': menu,
						'styles': {
							'fromLeft': "0",
							'toLeft': '-70%'
						},
						'action': 'show'
					},
					function(e) {
						console.log(JSON.stringify(e));
						if(e.id == _self.id) {}
					}.bind(this)
				)
			};
			window.addEventListener("menu:close", closeMenu);

			var _toast = false;

			mui.back = function() {
				if(parseInt(_self.getStyle().left) > 0) {
					closeMenu();
					return;
				}

				if(!_toast || !_toast.isVisible()) {
					_toast = mui.toast('åæä¸æ¬¡è¿åé®éåº<br>ç¹æ­¤å¯&nbsp;<span style="border-bottom:1px solid #fff" onclick="openFeedback();">åé¦æè§</span>', {
						duration: 'long',
						type: 'div'
					});
				} else {
					plus.runtime.quit();
				}
			}

			//éåmui.menuæ¹æ³ï¼Androidçæ¬menuæé®æä¸å¯èªå¨æå¼ãå³é­ä¾§æ»èåï¼
			mui.menu = function() {
				if(parseInt(_self.getStyle().left) > 0) {
					closeMenu();
				} else {
					openMenu();
				}
			}

			/**
			 * éåºæ¶æéç¨æ·åå é®é¢åé¦
			 */
			function openFeedback() {
				plus.nativeUI.showWaiting();
				var _p = plus.os.name === 'Android' ? 'a' : plus.os.name === 'iOS' ? 'i' : '';
				//TODOï¼è¿éä½¿ç¨çæ¯FeedBackäºå°åï¼å¼åèä¹å¯ä»¥æ¿æ¢ä¸ºæ¬å°é¡µé¢å°å
				var url = 'http://stream.dcloud.net.cn/wap2app/feedback?p=' + _p;
				url += "&plus_version=" + plus.runtime.innerVersion;
				url += "&vendor=" + plus.device.vendor;
				url += "&md=" + plus.device.model;
				/*****å¼åèéä¿®æ¹çé¨å   å¼å§*****/
				url += "&app_name=HelloMUI&app_vendor=DCloud";
				//å¦ææ¬å°å³äºé¡µé¢ï¼åå¡«åå³äºé¡µé¢çè·¯å¾
				//æ³¨æï¼éè¦_www/åç¼
				url += "&about=_www/examples/info.html";
				/*****å¼åèéä¿®æ¹çé¨å   ç»æ*****/

				var feedbackWebview = plus.webview.create(url, "__W2A_FEEDBACK");
				feedbackWebview.addEventListener('titleUpdate', function() {
					plus.nativeUI.closeWaiting();
					feedbackWebview.show('slide-in-right', 300);
				});
			}
		</script>
	</body>

</html>